<script setup lang="ts">
import router from '@/router'
import { useTabStore } from '@/stores/tabs'

const props = defineProps({
  menus: {
    type: Array<any>,
    required: true
  }
})

const store = useTabStore()
const toPage = (menu: any) => {
  store.addTab(menu)
  router.push(menu.uri)
}
</script>

<template>
  <template v-for="(v,i) in menus" :key="i">
    <a-sub-menu v-if="v.isMenu">
      <template #icon>
        <component :is="v.icon" />
      </template>
      <template #title>{{ v.name }}</template>
      <MenuItemComponent :menus="v.children" />
    </a-sub-menu>
    <template v-else>
      <a-menu-item v-if="v.show" @click="toPage(v)" :key="v.id">
        <template #icon>
          <component :is="v.icon" />
        </template>
        {{ v.name }}
      </a-menu-item>
    </template>
  </template>
</template>

<style scoped>

</style>
